<template>
	<div class="bottom-wrapper">
		<div class="bottom-fixed">
			<ul class="bottom-nav">
				<router-link class="bottom-nav-item" :to="{ path: '/' }" tag="li">
					<i class="iconfont icon-shouye1"></i>
					<h4>首页</h4>
				</router-link>
				<router-link class="bottom-nav-item" :to="{ path: '/category' }" tag="li">
					<i class="iconfont icon-fenlei"></i>
					<h4>分类</h4>
				</router-link>
				<router-link class="bottom-nav-item" :to="{ path: '/cart' }" tag="li">
					<i class="iconfont icon-gouwuchezhengchang">
						<badge v-if="cartLen > 0" class="badge" :text="cartLen"></badge>
					</i>
					<h4>购物车</h4>
				</router-link>
				<router-link class="bottom-nav-item" :to="{ path: '/my' }" tag="li">
					<i class="iconfont icon-wode1"></i>
					<h4>我的</h4>
				</router-link>
			</ul>
		</div>
	</div> 
</template>

<script>
import { Badge } from 'vux'
import { mapGetters } from 'vuex'	
export default {
  components: {
  	Badge
  },
  computed: {
  	...mapGetters(['cartLen'])
  }
}
</script>

<style>
.bottom-wrapper {
	height: 50px;
}
.bottom-fixed {
	position: fixed;
	bottom: 0;
	width: 100%;
	max-width: 640px;
	z-index: 98;
}
.bottom-nav {
	display: flex;
	height: 50px;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .117647), 0 1px 4px rgba(0, 0, 0, .117647);
}
.bottom-nav-item {
	flex: 1;
	padding-top: 9px;
	font-size: 0;
	text-align: center;
	color: rgba(0, 0, 0, .54);
}
.bottom-nav-item:active {
	background: #f8f8f8;
} 
.bottom-nav-item h4 {
  font-size: 12px;
}
.bottom-nav-item i {
	position: relative;
  font-size: 20px;
  line-height: 20px;
  display: inline-block;
}
.router-link-exact-active {
	color: #fd4257;
}
.mu-bottom-item-active i {
  color: #fd4257;
}
.badge {
	position: absolute;
	right: -8px;
	top: -3px;
	line-height: 16px !important;
	color: #fff !important;
	font-size: 10px !important;
}
</style>
